<template>
  <view class="container">
    <view class="content">
    <view class="header">正在测量中...</view>
		 <view class="measurement">
						<image src="../../static/images/heart.png" style="height: 80rpx;width: 60rpx;margin-right: 100rpx;"></image>
						<view class="measurement-value">{{pressureValue}}</view>
		</view>
      <view class="measurement-blocks">
        <view class="measurement-block" v-for="index in 4" :key="index"></view>
		<view class="measurement-block2" v-for="index in 5" :key="index"></view>
      </view>
    <view class="scale-lines">
               <view class="scale-line" v-for="(index, i) in 10" :key="index" :class="{ 'bold-scale-line': (i === 3 || i === 8) }"></view>
    </view>
    <view class="scale-labels">
			<text class="scale-label" style="margin-left: 190rpx;">90</text>
			<text class="scale-label" style="margin-right: 50rpx ;">140</text>
    </view>
    </view>
  </view>
</template>


<style>
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


.content {
  width: 80%;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20rpx;
  text-align: center;
}

.header {
	position: relative;
	align-items: center;
  font-size: 45rpx;
  font-weight: bold;
  margin-top: 30rpx;
  margin-bottom: 40rpx;
}

.measurement {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20rpx;
}

.measurement-value {
  font-size: 128rpx;
  margin-top: 80rpx;
  margin-bottom: 80rpx;
  color: #000000;
  font-family: Inter;
  font-weight: 600;
  line-height: 95rpx;
  letter-spacing: 5rpx;
}

.measurement-blocks {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.measurement-block {
  width: 52rpx;
  height: 30rpx;
  background-color: #4124f1;
}

.measurement-block2 {
  width: 52rpx;
  height: 30rpx;
  background-color: #d9d9d9;
}

.scale-lines {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.scale-line {
  width: 3rpx;
  height: 36rpx;
  background-color: #d9d9d9;
}

.bold-scale-line {
	width: 6rpx;
  height: 36rpx; 
}


.scale-labels {
  display: flex;
  justify-content: space-between;
}

.scale-label {
  font-size: 24rpx;
}
</style>



<script>
export default {
  props: {
    connectedToDevice: {
      type: Boolean,
      required: true
    },
    measuring: {
      type: Boolean,
      required: true
    },
		pressureValue:{
			type: Number
		}
  },
  data() {
    return {
      showPopup: false
    };
  },
  watch: {
    connectedToDevice(value) {
      if (value && this.measuring) {
        this.showPopup = true;
      }
    },
    measuring(value) {
      if (this.connectedToDevice && value) {
        this.showPopup = true;
      }
    }
  }
}
</script>

<!-- <style >
.mt-5 {
  margin-top: 10rpx;
}
.font_2 {
  font-size: 40rpx;
  font-family: Inter;
  line-height: 37rpx;
  color: #000000;
}
.section_3 {
	position:relative;
	padding: 68rpx 40rpx 132rpx;
	width: 315rpx;
	height: 315rpx;
	background: #FFFFFF;
	border-radius: 50rpx;

}

.group_6 {
  padding: 0 6rpx;
}
.text_5 {
  font-weight: 600;
  line-height: 37rpx;
}
.image {
  width: 30rpx;
  height: 40rpx;
}
.pos_2 {
  position: absolute;
  right: 6rpx;
  top: 50%;

}
.group_7 {
  margin-top: 24rpx;
  padding: 0 12rpx;
}
.image_2 {
  width: 58rpx;
  height: 80rpx;
}
.text_6 {
  color: #000000;
  font-size: 128rpx;
  font-family: Inter;
  font-weight: 600;
  line-height: 95.64rpx;
  letter-spacing: 5.12rpx;
}
.group_8 {
  margin-top: 44rpx;
  padding: 0 2rpx;
}
.section_6 {
  
  background-color: #4124f1;
  height: 30rpx;
  
}
.section_7 {
  
  background-color: #d9d9d9;
  height: 30rpx;
}
.group_9 {
  margin-top: 20rpx;
}
.section_8 {
  background-color: #d9d9d9;
  width: 4rpx;
  height: 36rpx;
}
.section_9 {
  background-color: #d9d9d9;
  width: 8rpx;
  height: 36rpx;
}
.view {
  margin-right: 12rpx;
}
.group_10 {
  margin-top: 20rpx;
  padding: 0 44rpx;
}
.font_4 {
  font-size: 34rpx;
  font-family: Inter;
  line-height: 25.84rpx;
  color: #959595;
}
.text_8 {
  margin-left: 120rpx;
  font-size: 32rpx;
  line-height: 23.92rpx;
}
.text_7 {
  font-size: 32rpx;
  line-height: 23.92rpx;
}
</style> -->

